<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            let data = {
                msg: "",
                count: 0,
                foo: {
                    bar: {
                        num: 1,
                    },
                },
            };

            let vm = new Proxy(data, {
                get(target, key) {
                    console.log("get", target, key);
                    return target[key];
                },
                set(target, key, newValue) {
                    console.log('old', target[key]);
                    console.log("set", target, key, newValue);
                    if (target[key] === newValue) {
                        return;
                    }
                    target[key] = newValue;
                    document.querySelector("#app").textContent = target[key];
                },
            });

            vm.msg = 1;
            console.log(vm.msg);
        </script>
    </body>
</html>
